<template>
  <div class="navbar" :style="{backgroundColor: bgColor, color: fontColor, height: navHeight}">
    <div @click="goBack" class="back" v-if="navInfo.showLeft">
      <icon name="arrow-left" size="1rem" color="#DBD7DB" />
      <span v-if="navInfo.showLeftLabel">{{navInfo.leftLabel || '返回'}}</span>
    </div>
    <div v-if="navInfo.title" class="title">{{navInfo.title || title}}</div>
    <div @click="rightEvent" class="other">
      <span v-if="navInfo.rightLabel">{{navInfo.rightLabel}}</span>
      <icon v-if="navInfo.rightIcon" :name="navInfo.rightIcon" size="1rem" color="#DBD7DB" />
    </div>
  </div>

  <!-- <div>
    <nav-bar :title="title" left-text="返回" left-arrow>
      <van-icon name="search" slot="right" />
    </nav-bar>
  </!-->
</template>

<script>
import { NavBar, Icon } from "vant";
import { mapState } from "vuex";

export default {
  components: {
    NavBar,
    Icon
  },
  data() {
    return {};
  },
  computed: {
    ...mapState({
      navInfo: state => state.router_module.navInfo,
      countAlias: "navInfo"
    })
  },
  mounted() {},
  props: {
    navHeight: {
      type: String,
      default: "46px"
    },
    title: {
      type: String,
      default: "此处是标题栏"
    },
    bgColor: {
      type: String,
      default: "#283C79"
    },
    fontColor: {
      type: String,
      default: "#fff"
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    rightEvent() {
      // 有rightEvent事件名才发射全局事件
      if (this.navInfo.rightEvent) {
        this.$EventBus.$emit(this.navInfo.rightEvent);
      }
    }
  }
};
</script>

<style scoped>
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  position: relative;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.back {
  width: auto;
  height: 100%;
  max-height: 30px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.back span {
  padding-left: 3px;
}

.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.other span {
  padding-right: 3px;
}

.other {
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
}
</style>

<style>
.van-nav-bar__left > i,
.van-nav-bar__left > span {
  color: #fff !important;
}

.van-nav-bar__title {
  color: #fff !important;
}

.van-nav-bar {
  background-color: #283c79;
}
</style>